<template>
  <div class="analysis_main">
    <div class="analysis_header">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="dateBox flex-start">
            <img src="@/assets/img/icon/icon_1.png" />
            <span><strong>￥{{infoDetail.contractAmount}}</strong>本年合同总金额（万元）</span>
          </div>
        </el-col>
        <!-- <el-col :span="6">
          <div class="dateBox flex-start">
            <img src="@/assets/img/icon/icon_2.png" />
            <span><strong>￥{{infoDetail.contractAmount}}</strong>本年成本支出（万元）</span>
          </div>
        </el-col> -->
        <el-col :span="6">
          <div class="dateBox flex-start">
            <img src="@/assets/img/icon/icon_3.png" />
            <span><strong>￥{{infoDetail.receivedAmount}}</strong>本年回款总金额（万元）</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="dateBox flex-start">
            <img src="@/assets/img/icon/icon_4.png" />
            <span><strong>{{infoDetail.receivedPercentage}} %</strong>本年回款率（%）</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="analysisox">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="dateBox">
            <h4>回款统计</h4>
            <AcrossLineChart ref="AcrossLineChart" class="dateBox-Chart"></AcrossLineChart>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
import AcrossLineChart from './components/pieChart.vue'
export default {
  components: { AcrossLineChart },
  data () {
    return {
      infoDetail: {
        contractAmount: 0,
        receivedAmount: 0,
        receivedPercentage: 0
      }
    }
  },
  mounted () {
    this.loadDetailWidgetData()
  },
  methods: {
    /**
     * 项目总览
     */
    loadDetailWidgetData () {
      let params = {
        projectId: this.$route.query.projectId
      };
      return new Promise((resolve, reject) => {
        Administration.overview(this, params).then(res => {
          this.infoDetail = res.data
          this.infoDetail.receivedPercentage = res.data.receivedPercentage * 100
          this.infoDetail.backPercentage = res.data.backPercentage * 100
          this.$nextTick(() => {
            this.$refs.AcrossLineChart.initChart(res.data)
          })
        }).catch(e => {
          reject(e);
        });
      });
    }
  }
}
</script>

<style scoped>
 .el-collapse {
    border: none;
  }

.el-divider--horizontal {
    margin: 0px;
  }
.el-tag {
    padding: 0px 30px;
  }
</style>

<style lang="scss" scoped>
  @import '@/assets/style/element-variables.scss';
  .flex-between {display: flex;justify-content: space-between;align-items: center;}
  .flex-start {display: flex;justify-content: flex-start;align-items: center;}
  .flex-center {display: flex;justify-content:center;align-items: center;}
  .flex-wrap{display: flex;flex-wrap: wrap;}
  .flex-justify{display: flex;justify-content:center;}
  .flex-sbetween {display: flex;justify-content: space-between;}
  .analysis_main{background-color: transparent !important;padding: 0 !important;}
  .dateBox{
    background: #FFFFFF;border-radius: 10px;padding: 20px;margin: 10px 0;position: relative;
    span{font-size: 12px;color: #909399;}
    strong{display: block;font-size: 18px;color: #303133;}
    .color-text-1{color: #409EFF;}
    .color-text-2{color: #F56C6C;}
    .color-text-3{color: #67C23A;}
    .color-text-4{color: #E6A23C;}
    .dateBox-Chart{height: 300px !important;}
    h4{padding: 0;margin: 0;}
    b{position: absolute;right: 20px;top: 10px;color: #558CFF;font-weight: normal;}
    /deep/.el-tabs__nav-wrap::after{display: none;}
    /deep/.el-tabs__item{padding-bottom: 5px;height: auto;line-height: inherit;}
    ul{
      padding: 0;margin: 10px 0;
      li{
        line-height: 24px;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;padding-left: 10px;
        span{color: #303133;margin-right: 10px;}
      }
      li::after{content: '';width: 5px;height: 5px;border-radius: 100%;position: absolute;left: 0;top: 10px;background: #303133;}
    }
  }
  .analysis_nav{
    span{display: block;}
    .el-col{text-align: center;}
  }
  .completed{
    background: #ECF5FF;border-left: 5px solid #79BBFF;border-radius: 5px;overflow: hidden;position: relative;padding: 10px;line-height: 24px;
    em{font-style: normal;position: absolute;right: 10px;top: 10px;background: #409EFF;border-radius: 20px;color: #FFFFFF;padding: 0 8px;font-size: 12px;}
  }
  .completed.warning{
    background: #FDF6EC;border-left: 5px solid #F0C78A;
    em{background: #E6A23C;}
  }
  .analysisox{
    .dateBox{padding: 10px 20px;}
  }
  .analysis_header{
    img{margin-right: 20px;}
    .dateBox{box-shadow: 0 0 10px rgba(0,0,0,0.05);}
  }
</style>
